<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HiPop Demo</title>
<meta name="keywords" content="" />
<meta name="description" content=""/>
<meta name="Copyright" content="" />
<meta name="author" content="" />
<script src="jq1.8.js"></script>
<script src="hipop.js"></script>
<style>
*{ margin:0; padding:0; list-style:none;}
#js-pop-mask, .js-pop-group{ position: fixed; _position: absolute;}
#js-pop-mask{ left:0; top:0; z-index:3333; display:none; background-color:#000; opacity:0.6; filter:alpha(opacity=60);}

.box{ width: 200px; height: 200px; background-color: #f60;  z-index: 99999; display: none;}
h3{ margin:10px 20px;}
p{ padding: 6px 20px;}
</style>
</head>

<body>
<!--<div style="width: 2000px;">test large width</div>-->
<h3>添加CSS代码</h3>
<p>#js-pop-mask, .js-pop-group{ position: fixed; _position: absolute;}</p>
<p>#js-pop-mask{ left:0; top:0; z-index:3333; display:none; background-color:#000; opacity:0.6; filter:alpha(opacity=60);}</p>

<h3>HTML格式</h3>
<p>窗口需添加class js-pop-group</p>
<p>窗口实例化后，带有js-pop-close的子元素点击后会关闭当前窗口</p>


<h3>使用new实例化弹窗</h3>
<p>var testbox = new HiPop({obj:'#box',init:true}); </p>
<p>***obj参数 为窗口选择符，支持class，id</p>
<p>***隐藏属性 init：true，表示实例化后立即执行弹窗</p>
<p>使用open()方法打开弹窗,默认打开背景遮罩，带参数则不显示背景</p>
<p>testbox.open(); //弹窗 并 显示背景</p>
<p>testbox.open(1); //弹窗 不显示背景</p>
<p>使用close()方法关闭弹窗，默认关闭背景遮罩，带参数则不关闭背景</p>
<p>testbox.close(); //关闭弹窗 并 关闭背景</p>
<p>testbox.close(1); //关闭弹窗 不关闭背景</p>

<h3>遮罩背景</h3>
<p>Pop_mask.run('show');//显示背景</p>
<p>Pop_mask.run('hide');//关闭背景</p>
<h3>clearHiPop() //不推荐  暴力关闭所有弹窗，不关闭遮罩背景</h3>

<div class="box js-pop-group" id="box"> <a class="js-pop-close" href="javascript:;">close</a></div>

<input type="button" value="弹窗并显示背景" style=" position:relative; z-index:8888" id="btn-show"> <br>
<input type="button" value="弹窗不显示背景" style=" position:relative; z-index:8888" id="btn-show-0"> <br>
<input type="button" value="关闭弹窗" style=" position:relative; z-index:8888" id="btn-hide"><br>
<input type="button" value="关闭弹窗 不关闭背景" style=" position:relative; z-index:8888" id="btn-hide-0"><br>




<script>
//20140401 IE6 BUG 背景关闭后出现横向滚动条  暂不处理

var c = new HiPop({obj:'#box'});
$('#btn-show').on('click',function(){
	c.open();
});

$('#btn-show-0').on('click',function(){
	c.open(1);
});

$('#btn-hide').on('click',function(){
	c.close();
});

$('#btn-hide-0').on('click',function(){
	c.close(1);
});
</script>


</body>
</html>